<template>
    <form method="GET" :action="action" accept-charset="UTF-8" class="navbar-form navbar-left hidden-sm hidden-md">
        <div class="form-group">
            <span class="glyphicon glyphicon-search form-control-lefticon" aria-hidden="true"></span>
            <input class="form-control search-input mac-style from-control-left-padding" width="228px" placeholder="搜索" name="q" type="text" value="" id="search">
        </div>
    </form>
</template>

<script>
    export default {
        props: {
            action :{
                type:String ,
            }
        },
        methods:{
            listen: function(){
                $('#search').on('focus',() => {
                    $('#search').width(250);
                    $('#search').addClass('search-shadow')
                })
                $('#search').on('blur',() => {
                    $('#search').width("180px");
                    $('#search').removeClass('search-shadow')
                })
            }
        },
        mounted(){
            this.listen();
        }
    }
</script>
